import React from 'react';
import { View, TextInput, Text, Platform } from 'react-native';
import t from 'tcomb-form-native';
import _ from 'lodash';
const Component = t.form.Component;
const Nil = t.Nil;

// extend the base Component
class MyTextBox extends Component {
  // this is the only required method to implement
  getTemplate() {
    // define here your custom template
    return function (locals) {
      if (locals.hidden) {
        return null;
      }

      const stylesheet = locals.stylesheet;
      let formGroupStyle = stylesheet.formGroup.normal;
      let controlLabelStyle = stylesheet.controlLabel.normal;
      let textboxStyle = stylesheet.textbox.normal;
      let textboxViewStyle = stylesheet.textboxView.normal;
      let helpBlockStyle = stylesheet.helpBlock.normal;
      const errorBlockStyle = stylesheet.errorBlock;

      if (locals.hasError) {
        formGroupStyle = stylesheet.formGroup.error;
        controlLabelStyle = stylesheet.controlLabel.error;
        textboxStyle = stylesheet.textbox.error;
        textboxViewStyle = stylesheet.textboxView.error;
        helpBlockStyle = stylesheet.helpBlock.error;
      }

      if (locals.editable === false) {
        textboxStyle = stylesheet.textbox.notEditable;
        textboxViewStyle = stylesheet.textboxView.notEditable;
      }

      const label = locals.label ? (
        <Text style={controlLabelStyle}>{locals.label}</Text>
      ) : null;
      const help = locals.help ? (
        <Text style={helpBlockStyle}>{locals.help}</Text>
      ) : null;
      const error =
        locals.hasError && locals.error ? (
          <Text accessibilityLiveRegion="polite" style={errorBlockStyle}>
            {locals.error}
          </Text>
        ) : null;
      const rightCont = value => {
        if (_.isFunction(locals.config.rightCont)) {
          return locals.config.rightCont(value);
        }
        return null;
      };
      return (
        <View style={formGroupStyle}>
          {label}
          <View style={[textboxViewStyle]}>
            <TextInput
              accessibilityLabel={locals.label}
              ref="input"
              autoCapitalize={locals.autoCapitalize}
              autoCorrect={locals.autoCorrect}
              autoFocus={locals.autoFocus}
              blurOnSubmit={locals.blurOnSubmit}
              editable={locals.editable}
              keyboardType={locals.keyboardType}
              maxLength={locals.maxLength}
              multiline={locals.multiline}
              onBlur={locals.onBlur}
              onFocus={locals.onFocus}
              onLayout={locals.onLayout}
              onSelectionChange={locals.onSelectionChange}
              onSubmitEditing={locals.onSubmitEditing}
              onContentSizeChange={locals.onContentSizeChange}
              placeholderTextColor={locals.placeholderTextColor}
              secureTextEntry={locals.secureTextEntry}
              selectTextOnFocus={locals.selectTextOnFocus}
              selectionColor={locals.selectionColor}
              numberOfLines={locals.numberOfLines}
              underlineColorAndroid={locals.underlineColorAndroid}
              clearButtonMode={locals.clearButtonMode}
              clearTextOnFocus={locals.clearTextOnFocus}
              enablesReturnKeyAutomatically={
                locals.enablesReturnKeyAutomatically
              }
              keyboardAppearance={locals.keyboardAppearance}
              onKeyPress={locals.onKeyPress}
              returnKeyType={locals.returnKeyType || 'done'}
              selectionState={locals.selectionState}
              onChangeText={
                Platform.select({
                  ios: value => locals.onChangeNative(_.trim(value) || null),
                  android: value => locals.onChange(_.trim(value) || null)
                })
              }
              onChange={locals.onChangeNative}
              onEndEditing={event =>
                Platform.select({
                  ios: locals.onChange(_.trim(event.nativeEvent.text) || null),
                  android: locals.onEndEditing
                })
              }
              // onEndEditing={locals.onEndEditing}
              placeholder={locals.placeholder}
              style={textboxStyle}
              value={locals.value}
              defaultValue={locals.value}
            />
            {rightCont(locals.value)}
          </View>
          {help}
          {error}
        </View>
      );
    };
  }

  // you can optionally override the default getLocals method
  // it will provide the locals param to your template

  getPlaceholder() {
    let placeholder = this.props.options.placeholder;
    if (Nil.is(placeholder) && this.getAuto() === 'placeholders') {
      placeholder = this.getDefaultLabel();
    }
    return placeholder;
  }

  getKeyboardType() {
    const keyboardType = this.props.options.keyboardType;
    if (t.Nil.is(keyboardType) && this.typeInfo.innerType === t.Number) {
      return 'numeric';
    }
    return keyboardType;
  }

  getLocals() {
    const locals = super.getLocals();
    locals.placeholder = this.getPlaceholder();
    locals.onChangeNative = this.props.options.onChange;
    locals.keyboardType = this.getKeyboardType();
    locals.underlineColorAndroid =
      this.props.options.underlineColorAndroid || 'transparent';
    [
      'help',
      'autoCapitalize',
      'autoCorrect',
      'autoFocus',
      'blurOnSubmit',
      'editable',
      'maxLength',
      'multiline',
      'onBlur',
      'onEndEditing',
      'onFocus',
      'onLayout',
      'onSelectionChange',
      'onSubmitEditing',
      'onContentSizeChange',
      'placeholderTextColor',
      'secureTextEntry',
      'selectTextOnFocus',
      'selectionColor',
      'numberOfLines',
      'clearButtonMode',
      'clearTextOnFocus',
      'enablesReturnKeyAutomatically',
      'keyboardAppearance',
      'onKeyPress',
      'returnKeyType',
      'selectionState',
    ].forEach(name => (locals[name] = this.props.options[name]));
    return locals;
  }
}

export default MyTextBox;
